<template>
    <div class="kaohe">
        <ModalTitle :title="type == '1' ? '各城区考核排名TOP5' : '各部门考核排名TOP5'" />
        <div class="kaohe-box">
            <div class="kaohe-box-list" v-for="(item, index) in kaoheList" :key="item.id">
                <span>No.{{ index + 1 }}</span>
                <span :style="{width:type == '2' ? '8rem' : '' }">{{ item.title }}</span>
                <div>
                    <p :style="{width: item.percentage}"></p>
                </div>
                <span>{{ item.totalToDispatched }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import ModalTitle from '@/components/ModalTitle/Index.vue'
import { ZongHeZhiFaDB } from '@/api/zhangzi'

export default {
    props: {
        type: {
            type: String,
            default: '1'
        }
    },
    components: {
        ModalTitle
    },

    data() {
        return {
            kaoheList: []
        }
    },

    mounted() {
        if (this.type == '1') {
            this.streetListFn()
        } else {
            this.bureauListFn()
        }
    },
    methods: {
        streetListFn() {
            ZongHeZhiFaDB.streetList().then(res => {
                // console.log(res, 'ZongHeZhiFaDB')
                if (res.code == 200) {
                    let data = res.data
                    this.kaoheList = data.splice(0, 5)
                    this.kaoheList.forEach(item => {
                        item.percentage = this.getPercent(Number(item.totalToDispatched), 100)
                    });
                    // console.log(this.kaoheList, 'this.kaoheList')
                }
            })
        },

        bureauListFn() {
            ZongHeZhiFaDB.bureauList().then(res => {
                // console.log(res, 'ZongHeZhiFaDB')
                if (res.code == 200) {
                    let data = res.data
                    this.kaoheList = data.splice(0, 5)
                    this.kaoheList.forEach(item => {
                        item.percentage = this.getPercent(Number(item.totalToDispatched), 100)
                    });
                    // console.log(this.kaoheList, 'this.kaoheList')
                }
            })
        },

        getPercent(num, total) {
            num = parseFloat(num);
            total = parseFloat(total);
            if (isNaN(num) || isNaN(total)) {
                return "-";
            }
            return total <= 0 ? "0%" : Math.round((num / total) * 10000) / 100.0 + "%";
        }
    }
}
</script>

<style lang="less" scoped>
.kaohe {
    height: 30rem;
    margin: 1.6rem 0;

    .kaohe-box {
        width: 100%;
        height: calc(100% - 5.8rem);
        margin-top: 2rem;
        overflow: auto;

        .kaohe-box-list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2rem;

            &:last-child {
                margin-bottom: 0;
            }

            span {
                display: inline-block;
                font-size: 1.6rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #C0D3D6;

                &:nth-child(1) {
                    color: #25E3FF;
                    width: 3.5rem;
                    overflow: hidden;
                }

                &:nth-child(2) {
                    width: 6.4rem;
                    overflow: hidden;
                    margin: 0 0 0 1rem;
                }

                &:nth-child(4) {
                    color: #25E3FF;
                }
            }

            div {
                flex: 1;
                height: 0.5rem;
                background: rgba(0, 0, 0, 0.2);
                margin: 0 1rem;

                p {
                    width: 50%;
                    height: 0.5rem;
                    background: #00D6FB;
                }
            }
        }
    }
}
</style>